<template>
    <div>
       <div class="login">
           <img src="./imgs/download.png" alt="">
       </div>
       <div class="botton">
           <van-form @submit="onSubmit">
        <van-field
            v-model="username"
            name="username"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
            v-model="password"
            type="password"
            name="password"
            label="密码"
            placeholder="密码"
            :rules="[
            { required: true, message: '请填写密码' },
            {
                pattern: /^\d{4,8}$/,
                message: '密码4~8位'

            }
            ]"
        />
        <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit">提交</van-button>
        </div>
</van-form>
       </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    onSubmit (values) {
      // 提交登录数据
      setTimeout(() => {
        const token = 'dwefwef23883fuwehf7we'
        const userInfo = {
          nickName: '小霞',
          avatar: 'https://img0.baidu.com/it/u=4049779464,4226041747&fm=26&fmt=auto&gp=0.jpg',
          sex: '女'
        }
        // 缓存
        localStorage.setItem('token', token)
        localStorage.setItem('userInfo', JSON.stringify(userInfo)) // 不能直接存对象 要转化为JSON格式
        if (this.$route.query.from) {
          this.$router.replace(this.$route.query.from)
        } else {
          this.$router.replace('/home')
        }
        /*
        */
      }, 2000)
    }
  }
}
</script>

<style lang='scss'>
*{
    margin: 0;
}
.login{
    img{
        position: absolute;
        width: 30%;
        bottom: 45px;
        left: 118px;
    }
    position: relative;
    text-align: center;
    height: 225px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: url(http://m.anportshop.com/Public/weixin/images/login-bg.jpg);
}
.botton{
    height: 300px;
    background-color: #fff;
}
</style>
